(function () {
    var vm = window.vm = new Vue({
        el: '.aui-wrapper',
        i18n: window.SITE_CONFIG.i18n,
        mixins: [window.SITE_CONFIG.mixinViewModule],
        data: function () {
            return {
                mixinViewModuleOptions: {
                    getDataListURL: '/sys/dept/pageList',
                    getDataListIsPage: true,
                    deleteURL: '/sys/dept',
                    sysDeptDTO: {}
                },
                deptList: [],
                deptListVisible: false,
                dataForm: {
                    id: '',
                    name: '',
                }


            }
        },
        beforeCreate: function () {
            vm = this;
        },
        components: {
            'add-or-update': fnAddOrUpdateComponent(),
            'add-view': fnAddViewComponent()
        },
        methods: {
            getDeptList: function () {
                return vm.$http.get('/sys/dept/list').then(function (res) {
                    if (res.data.code !== 0) {
                        return vm.$message.error(res.data.msg);
                    }
                    vm.deptList = res.data.data;
                }).catch(function () {
                });
            },
            deptListTreeCurrentChangeHandle: function (data, node) {
                vm.dataForm.id = data.id;
                vm.dataForm.name = data.name;
                vm.deptListVisible = false;
            },
            clear: function (data, node) {
                vm.dataForm.id = '';
            }
        },
        created: function () {
            vm.getDeptList();
        },

    });
})();

/**
 * add-or-update组件
 */
function fnAddOrUpdateComponent() {

    var self = null;
    return {
        template: '\
    	 <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t(\'add\') : $t(\'update\')" :close-on-click-modal="false" :close-on-press-escape="false" :fullscreen="true">\
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="150px">\
          <el-form-item label="部门名称" prop="name" >\
            <el-input v-model="dataForm.name" placeholder="部门名称" :disabled="dataForm.id!=null"></el-input>\
          </el-form-item>\
    	 <el-form-item prop="parentName" :label="$t(\'dept.parentName\')" class="dept-list">\
        <el-popover v-model="deptListVisible" ref="deptListPopover" placement="bottom-start" trigger="click">\
    	<div class=\'tree\' style=\'overflow-y:scroll;overflow-x: auto;height: 200px;width:200px;\'>\
    	 <el-tree\
         :data="deptList"\
         :props="{ label: \'name\', children: \'children\' }"\
         node-key="id"\
         ref="deptListTree"\
         :highlight-current="true"\
         :expand-on-click-node="false"\
         accordion\
         @current-change="deptListTreeCurrentChangeHandle">\
       </el-tree>\
    	</div>\
        </el-popover>\
        <el-input v-model="dataForm.parentName" v-popover:deptListPopover :readonly="true" :placeholder="$t(\'dept.parentName\')">\
          <i\
            v-if="superAdmin === 1 && dataForm.pid !== \'0\'"\
            slot="suffix"\
            @click.stop="deptListTreeSetDefaultHandle()"\
            class="el-icon-circle-close el-input__icon">\
          </i>\
        </el-input>\
      </el-form-item>\
      <el-form-item>\
      <el-input-number v-model="dataForm.sort" @change="sort" :min="1" :max="10" label="排序"></el-input-number>\
      </el-form-item>\
        </el-form>\
        <template slot="footer">\
          <el-button @click="visible = false">{{ $t(\'cancel\') }}</el-button>\
          <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t(\'confirm\') }}</el-button>\
        </template>\
      </el-dialog>\
    ',
        data: function () {
            return {
                visible: false,
                deptList: [],
                deptListVisible: false,
                dataForm: {
                    id: '',
                    name: '',
                    pid: '',
                    parentName: '',
                    sort: 0
                }
            }
        },
        computed: {
            superAdmin: function () {
                return window.parent.vm.user.superAdmin;
            },
            dataRule: function () {
                return {
                    name: [
                        {required: true, message: self.$t('validate.required'), trigger: 'blur'}
                    ],
                }
            }
        },
        beforeCreate: function () {
            self = this;
        },
        methods: {
            init: function () {
                self.visible = true;
                self.$nextTick(function () {
                    self.$refs['dataForm'].resetFields();
                    self.getDeptList().then(function () {
                        if (self.dataForm.id) {
                            self.getInfo();
                        } else if (self.superAdmin === 1) {
                            self.deptListTreeSetDefaultHandle();
                        }
                    });
                });
            },
            // 获取部门列表
            getDeptList: function () {
                return self.$http.get('/sys/dept/list').then(function (res) {
                    if (res.data.code !== 0) {
                        return self.$message.error(res.data.msg);
                    }
                    self.deptList = res.data.data;
                }).catch(function () {
                });
            },
            // 获取信息
            getInfo: function () {
                self.$http.get('/sys/dept/' + self.dataForm.id).then(function (res) {
                    if (res.data.code !== 0) {
                        return self.$message.error(res.data.msg);
                    }
                    console.log(res.data.data)
                    self.dataForm = _.merge({}, self.dataForm, res.data.data);
                    if (self.dataForm.pid === '0') {
                        return self.deptListTreeSetDefaultHandle();
                    }
                    self.$refs.deptListTree.setCurrentKey(self.dataForm.pid);
                }).catch(function () {
                });
            },
            // 上级部门树, 设置默认值
            deptListTreeSetDefaultHandle: function () {
                self.dataForm.pid = '0';
                self.dataForm.parentName = self.$t('dept.parentNameDefault');
            },
            // 上级部门树, 选中
            deptListTreeCurrentChangeHandle: function (data) {
                self.dataForm.pid = data.id;
                self.dataForm.parentName = data.name;
                self.deptListVisible = false;
            },
            // 表单提交
            dataFormSubmitHandle: _.debounce(function () {
                self.$refs['dataForm'].validate(function (valid) {
                    if (!valid) {
                        return false;
                    }
                    self.$http[!self.dataForm.id ? 'post' : 'put']('/sys/dept', self.dataForm).then(function (res) {
                        if (res.data.code !== 0) {
                            return self.$message.error(res.data.msg);
                        }
                        self.$message({
                            message: self.$t('prompt.success'),
                            type: 'success',
                            duration: 500,
                            onClose: function () {
                                self.visible = false;
                                self.$emit('refresh-data-list');
                            }
                        });
                    }).catch(function () {
                    });
                });
            }, 1000, {'leading': true, 'trailing': false})
        }
    }
};

/**
 * add-view组件
 */
function fnAddViewComponent() {

    var self = null;
    return {
        template: `
      <div id="dept-management">
        <el-dialog :visible.sync="visible" :close-on-click-modal="false" top="0" title="商户详情">
          <div class="detail">
            <p><b>部门名称 &nbsp;:&nbsp; </b>{{ dataForm.name }}</p>
            <p><b>创建时间 &nbsp;:&nbsp; </b>{{ dataForm.createDate }}</p>
          </div>
          <template slot="footer">
            <el-button @click="visible = false" type="primary">关闭</el-button>
          </template>
        </el-dialog>
      </div>
	    `,
        data: function () {
            return {
                visible: false,
                dataForm: {}
            }
        },
        computed: {},
        beforeCreate: function () {
            self = this;
        },
        methods: {}
    }
};